<template>
	<view class="mord">
		<view class="top">
			<view :class="active == 0?'active':''" @click="changeActive(0)">
				商品
			</view>
			<view :class="active == 1?'active':''" @click="changeActive(1)">
				品牌
			</view>
			<view :class="active == 2?'active':''" @click="changeActive(2)">
				店铺
			</view>

		</view>
		<view class="list" v-if="active == 0">
			<view v-for=" l in collection" class="li" :key="l.id" @longtap="longtap(l)">
				<navigator :url="'/pages/detail/index?id='+l.pid" class="imgbox">
					<image :src="l.defaultAlbum" mode="widthFix"></image>
				</navigator>
				<view class="text">
					<navigator :url="'/pages/detail/index?id='+l.pid" class="h1">
						{{l.pName}}
					</navigator>
					<view class="p">
						<text>￥{{l.fSalePrice}}</text> 比原价便宜了￥{{l.fMarkPrice}}元
					</view>
					<view class="nav">
						<navigator :url="'/pages/user/xiang?id='+l.pid">找相似</navigator>
						<view class="add">
							<image src="../../static/img/3/3-84.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="list" v-if="active == 1">
			<view class="li" v-for="l in listB" :key="l.id" @click="toDetail(l)">
				<image :src="l.brandLogo" mode="widthFix"></image>
				<view class="text">
					{{l.name}}
					<view class="num">
						<!-- 11万人关注 -->
					</view>
					<view class="biao">
						<!-- 专题 新品 -->
					</view>
				</view>
				<!-- <image src="../../static/img/3/3-83.png" class="dd" mode="widthFix"></image> -->
			</view>
		</view>
		<view class="list list-shop" v-if="active == 2">
			<view class="li" v-for="l in shopList" :key="l.id" @click="toShop(l.shopid)">
				<image :src="l.cLogoUrl" mode="widthFix"></image>
				<view class="text">
					<view>
						{{l.cShopShowName}} <text>{{l.cShopShowName}}</text>
					</view>
					<view class="num">
						{{l.iFavoriteNum}}人关注
					</view>
				</view>
				<navigator url="">进入店铺</navigator>
				<!-- <image src="../../static/img/3/3-83.png" class="dd" mode="widthFix"></image> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "",
		components: {

		},
		data() {
			return {
				num: 0,
				collection: [],
				active:0,
				listB:[],
				shopList:[]
			}
		},
		mounted() {
			
		},
		onLoad(options) {

		},
		onShow() {
			this.getData()
		},
	
		methods: {
			getData(){
				let that = this;
				that.$Request.post(
					that.$api.httpApi.user.collection + '&token=' + that.$SysCache.get('token'),
				).then(res => {
					if (res.code == 200) {
						that.collection = res.data.pager.data;
					}
				});
			},
			getShopList(){
				let that = this
				that.$Request.post(
					that.$api.httpApi.goods.getShopFavorites + '&token=' + that.$SysCache.get('token'),
				).then(res => {
					if (res.code == 200) {
						that.shopList = res.data.pager.data;
						
				
					}
				});
			},
			changeActive(str){
				this.active = str
				
				if(str == 1){
					this.getBrand()
				}else if(str == 0){
					this.getData()
				}else{
					this.getShopList()
				}
			},
			longtap(item) {
				let that = this
				let delData = {
					"productId":item.pid
				}
				uni.showModal({
					title: "提示",
					confirmText: "取消收藏",
					content:"操作",
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							that.$Request.post(that.$api.httpApi.goods.delFavoritesByProductId + "&token=" + that.$SysCache.get('token'),
								delData).then(
								res => {
									if (res.code == 200) {
										uni.showToast({
											title: res.message,
											duration: 2000
										})
										that.getData()
									}
								})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			getBrand(){
				this.$Request.post4(
					this.$api.httpApi.home.getCollectedBrand, {
						uid: this.$SysCache.get("userInfo").id
					}
				).then(res => {
					if (res.code == 1) {
						this.listB = res.data
				
				
					}
				})
			},
			toDetail(item){
				uni.navigateTo({
					url: '/pages/brand/detial?brand_id=' + item.id,
				})
			},
			toShop(id){
				uni.navigateTo({
					url: `/pages/inner/shopindex?id=${id}`
				})
			}
		}


	}
</script>

<style scoped lang="less">
	.text {
		width: calc(100% - 225rpx - 25rpx);
		display: inline-block;
		vertical-align: middle;
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(77, 77, 77, 1);
	}

	.p {
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(240, 64, 111, 1);
		margin-top: 18rpx;
	}

	.p text {
		font-size: 30rpx;
		margin-right: 12rpx;
	}

	.nav {
		margin-top: 18rpx;
	}

	.nav navigator {
		display: inline-block;
		width: 97rpx;
		height: 45rpx;
		background: rgba(255, 255, 255, 1);
		border: 1px solid rgba(240, 64, 111, 1);
		color: rgba(240, 64, 111, 1);
		text-align: center;
		font-size: 24rpx;
		line-height: 45rpx;
		border-radius: 23rpx;
	}

	.nav .add {
		display: inline-block;
		float: right;
		width: 33rpx;
		margin-top: 10rpx;
	}

	.nav .add image {
		display: block;
		width: 100%;

	}

	.list {
		width: 90%;
		margin: auto;
		padding-top: 30rpx
	}

	.list .li {
		background: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.imgbox {
		width: 225rpx;
		display: inline-block;
		vertical-align: middle;
		margin-right: 25rpx;
	}

	.imgbox image {
		max-width: 197rpx;
	}

	.top {
		height: 62rpx;
		background: #040000;
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(231, 231, 231, 1);
		text-align: center;
		display: flex;
		line-height: 62rpx;
	}

	.top view {
		flex: 1;
		margin-left: 90rpx;
		margin-right: 90rpx;
	}

	.active {
		border-bottom: 3rpx solid #F0406F;
		color: #F0406F;
	}

	uni-page-body {
		height: 100%;
	}

	.mord {
		min-height: 100%;
		background: #EEEEEE;
	}
	.list-shop{
		.li {
			background: #fff;
			margin-top: 10rpx;
			padding: 20rpx;
		}
		.li image{
			display: inline-block;
			vertical-align: middle;
			width:120rpx;
			height:120rpx;
			border-radius: 50%;
		}
		.li .text{
			width: calc(100% - 120rpx - 22rpx - 30rpx - 22rpx - 22rpx - 109rpx);
			margin-left: 22rpx;
			font-size:26rpx;
			font-family:Microsoft YaHei;
			font-weight:400;
			color:rgba(77,77,77,1);
			display: inline-block;
			vertical-align: middle;
		}
		.li .text .num{
			font-size:24rpx;
			font-family:Microsoft YaHei;
			font-weight:400;
			color:rgba(176,176,176,1);
			margin-top: 11rpx;
		}
		.li .text .biao{
			color: #666;
			margin-top: 16rpx;
		}
			.li .text text{
				display: inline-block;
				// width:52rpx;
				padding: 2upx 5upx;
				// height:26rpx;
				background:rgba(0,0,0,1);
				border-radius:5rpx;
				font-size:22rpx;
				font-family:Microsoft YaHei;
				font-weight:400;
				color:rgba(238,238,238,1);
				line-height:26rpx;
				text-align: center;
				margin-left: 11rpx;
			}
			.li navigator{
				display: inline-block;
				vertical-align: middle;
				width:109rpx;
				height:34rpx;
				background:rgba(240,64,111,1);
				border-radius:5rpx;
				font-size:26rpx;
				font-family:Microsoft YaHei;
				font-weight:400;
				color:rgba(255,255,255,1);
				line-height:34rpx;
				text-align: center;
			}
		.li .dd{
			display: inline-block;
			width: 30rpx;
			vertical-align: middle;
			margin-left: 22rpx;
		}
		.top {
			height: 62rpx;
			background: #040000;
			font-size: 26rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: rgba(231, 231, 231, 1);
			text-align: center;
			display: flex;
			line-height: 62rpx;
		}
		
		.top navigator {
			flex: 1;
			margin-left: 90rpx;
			margin-right: 90rpx;
		}
		
		.active {
			border-bottom: 3rpx solid #F0406F;
			color: #F0406F;
		}
		
		uni-page-body {
			height: 100%;
		}
		
		.mord {
			min-height: 100%;
			background: #EEEEEE;
		}
	}
</style>
